<?php

require_once('Config.php');

    $resultCount = mysql_num_rows(mysql_query('select id from news where newsType=0 order by createTime desc'));
    $pageSize=4;
    $currentPage =isset($_GET['page'])?intval($_GET['page']):1; 
    $pageCount = ceil($resultCount/$pageSize);   
    
    if($currentPage>$pageSize||$currentPage==0){
      echo 'Could not found the page.';
      exit();
    }
    $offset=($currentPage-1)*$pageSize;
    $info=mysql_query("select * from news where newsType=0 limit $offset,$pageSize"); 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Twilight Cocktail Bar | Beijing</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/tam.js">
    </script>
    <style type="text/css">

      .twi .pandora .news-list {
        width:560px;
        height:448px;
        display:table-cell;
        position:absolute;
        left:332px;
        top:150px;
        bottom:57px;
        font-size:10pt;
        vertical-align:bottom;
        overflow:hidden;
        font-family:verdana, Geneva, Arial, Helvetica, sans-serif;

      }
      
      .details{
         width:560px;
        height:448px;
        display:table-cell;
        position:absolute;
        left:332px;
        top:150px;
        bottom:57px;
        font-size:10pt;
        vertical-align:bottom;
        overflow:hidden;
        
        font-family:verdana, Geneva, Arial, Helvetica, sans-serif;
        z-index:200;
      }
       .twi .news-list dl{
         margin:0px;
         padding:0px;
       }
      .twi .news-list dt {
        font-weight:bold;
        color:#fff;
        font-size:14px;
      }
      /*.twi .news-list dt a{
      color:#C92C24;
      font-weight:bold;
      text-decoration:underline;
      }
      .twi .news-list dt a:hover{
      color:#fff;

      }*/
      .twi .news-list dd {
        font-style:italic;
        font-size:12px;
        line-height:20px;
        color:#999;
        margin-bottom:1em;

      }
      .twi .news-list dd label a,em {
        color:#8F8672;
        text-decoration:none;
        font-style:normal;
        font-size:12px;
        font-weight:bold;
      }
      .twi .news-list dd label a:hover {
        text-decoration:none;
        color:#fff;
      }
    .pagingWrapper{line-height:22px;}
.pagingWrapper a{font-weight:bold; color:#c92c24;text-decoration:none;}
.pagingBox{
  font-size:11px;
  height:20px;
  width:2em;
  
}

.details em{
  font-size:11px;
  display:block;
  color:#8F8672;
  height:20px;
  line-height:20px;
  text-align:right;
  width:100%;
  cursor:pointer;
}

.details em a{
  font-size:11px;
  display:block;
  color:#8F8672;
  height:20px;
  line-height:20px;
  text-align:right;
  width:100%;
  cursor:pointer;
  text-decoration:none;
  outline:none;
}

.details em a:hover{
  color:#fff;
  text-decoration:none;
}
.details .title{
color:#C92C24;
font-size:14px;
font-weight:bold;
text-align:left;
margin-bottom:1em;

width:100%;
  
}
.details .content{
  height:424px;
  display:block;
  width:100%;
  margin-top:4px;
  overflow:scroll;
  overflow-x:hidden;
  SCROLLBAR-FACE-COLOR: #666;
  SCROLLBAR-HIGHLIGHT-COLOR: #333;
  SCROLLBAR-SHADOW-COLOR: #333;
  SCROLLBAR-3DLIGHT-COLOR: #333;
  SCROLLBAR-ARROW-COLOR: #666;
  SCROLLBAR-TRACK-COLOR: #333;
  SCROLLBAR-DARKSHADOW-COLOR: #333;
  SCROLLBAR-BASE-COLOR: #333 ;
}
    </style>
    <link href="css/common.css" rel="stylesheet" type="text/css">
  </head>
  <body class="twi" scroll=no>

    <div class="pandora" id="mainStage">
      <div class="common-page-logo">
      </div>
      <div class="common-page-banner" style="background-image:url(images/news-banner-bg.jpg)">
      </div>
      <div class="news-list">
        <dl>
        <?php 
        while($row=mysql_fetch_array($info)){
      ?>
          <dt id='title_<?php echo $row['id']?>'>
           <?php echo $row['title'];?>
          </dt>
          <dd>
            <?php 
       echo $row['outline'];
      ?>
            <label>
            <span id='news_<?php echo $row['id']?>' style='display:none'><?php echo $row['content']?></span>
             <a href="javascript:app.showDetails('news_<?php echo $row['id']?>')">「Click for details」</a>
            </label>
          </dd>
          
          <?php }?>
        </dl>
        
        <p class="pagingWrapper">
   <?php 
   //first
   if($currentPage>1){
     echo '<label><a href="?page=1">First</a></label> | ';
   }else{
     echo '<label>First</label> | ';
   }
      
    // prvious
    if($currentPage>1){
      echo ('<label><a href="?page='.($currentPage-1).'">Prev</a></label> |');
    }else{
      echo '<label>Prev</label> | ';
    } 
  
    //next 
    if($currentPage<$pageCount){
      echo ('<label><a href="?page='.($currentPage+1).'">Next</a></label> |');
    }
    else{
      echo '<label>Next</label> | ';
    }
  //last
  if($pageCount>1&&$currentPage<$pageCount){
    echo ('<label><a href="?page='.$pageCount.'">Last</a></label> |');
    
  }else{
    
     echo '<label>Last</label> | ';
  }
  
     ?>
      
      
     
     <label> &nbsp;(<?php echo $currentPage.'/'.$pageCount?> <strong>Pgs</strong>)</label>
     <!--<label> &nbsp;to Pg<input type="text" class="pagingBox"/><label></label>
     <label><input type="button" value="go"/></label>-->
   </p>
      </div>
      <div class="mainMenu-wrapper">
        <div class="mainMenu">
          <ul>
            <li class="menu_home">
              <a href="index.php"><!--HOME--></a>
            </li>
            <li class="menu_aboutUs">
              <a href="aboutus.php"><!--ABOUT US--></a>
            </li>
            <li class="menu_gallery">
              <a href="gallery.php"><!--GALLERY--></a>
            </li>
            <li class="menu_menus" >
              <a href="menus.php"><!--MENUS--></a>
            </li>
            <li class="menu_news">
              <a href="#" style="background-position:-472px -18px;"><!--NEWS--></a>
            </li>
            <li class="menu_events">
              <a href="events.php"><!--EVENTS--></a>
            </li>
            <li class="menu_contact">
              <a href="contact.php"><!--CONTACT--></a>
            </li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <strong style="color:#666">Twilight Cocktail Bar</strong> @ Beijing &copy 2010  | Mail:<strong>info@twilightcocktailbar.com</strong> | Tel:<strong> +86 10 5900 5376</strong>
      </div>
    </div>
  </body>
  <script type="text/javascript">

    var app={
      init: function() {
      
      
      },
      showDetails:function(idStr){
        var title = $('#title_'+idStr.split('_')[1]).html();
        var details = $("<div class='details'><em><a href='javascript:app.showList()'> < Back to news list </a></em><div class='content'><div class='title'>"+title+"</div>"+$('#'+idStr).html()+"</div></div>");
        $(details).css('opacity',0);
        $('#mainStage').append(details);
        $('.news-list').fadeOut('slow');
        $(details).animate({opacity:1},800);
      },
      showList:function(){
      $('.news-list').fadeIn('slow');
      $('.details').fadeOut('slow',function(){
        $(this).remove();
      });
      }

    }
  </script>
  <script type="text/javascript" src="js/common.js">
  </script>
</html>

